<template>
  <v-container>
    <v-row>
      <v-col cols="12" md="8">
        <div class="pt-5">
          <span class="display-1 font-weight-bold">设置</span>
        </div>
        <div class="pt-9">
          <span style="color:#365A89;">个人设置</span>
        </div>
        <div class="pt-5">
          <div>
            <v-avatar @click="upload" class="my-5 pr-2" size="72" style="cursor:pointer;">
              <img :src="user.profile_pic" :alt="user.name" />
            </v-avatar>
            <span class="body-2 font-weight-light ml-3"
              >你的头像，至少160*160px</span
            >
            <input
              type="file"
              id="upload"
              ref="upload"
              @change="changeimg"
              accept=".jpg, .jpeg, .png"
              style="display:none;"
            />
          </div>
          <span style="color:#365A89;">昵称</span>
          <v-form ref="form" class="pt-0">
            <v-text-field v-model="user.name" required></v-text-field>

            <v-btn color="primary" @click="save">
              保存资料
            </v-btn>
          </v-form>
          <div class="pt-7">
            <span style="color:#365A89;">更改密码</span>
            <v-form ref="form" class="pt-0">
              <v-text-field
                placeholder="旧密码（没有则留空）"
                :type="show1 ? 'text' : 'password'"
                v-model="user.old_password"
                @click:append="show1 = !show1"
                :append-icon="show1 ? 'mdi-eye' : 'mdi-eye-off'"
              ></v-text-field>
              <v-text-field
                placeholder="新密码"
                :type="show2 ? 'text' : 'password'"
                v-model="user.new_password"
                @click:append="show2 = !show2"
                :append-icon="show2 ? 'mdi-eye' : 'mdi-eye-off'"
                required
              ></v-text-field>

              <v-btn color="primary" @click="update">
                更新密码
              </v-btn>
            </v-form>
          </div>
        </div>
      </v-col>
    </v-row>
    <v-snackbar
      v-model="snackbar"
      :bottom="y === 'bottom'"
      :color="color"
      :left="x === 'left'"
      :multi-line="mode === 'multi-line'"
      :right="x === 'right'"
      :timeout="timeout"
      :top="y === 'top'"
      :vertical="mode === 'vertical'"
    >
      {{ text }}
      <v-btn color="white" text @click="snackbar = false">
        Close
      </v-btn>
    </v-snackbar>
  </v-container>
</template>

<script>
export default {
  data() {
    return {
      user: {},
      color: "success",
      mode: "",
      snackbar: false,
      text: "更新成功",
      timeout: 2000,
      x: null,
      y: "top",
      show1: false,
      show2: false
    };
  },
  created() {
    this.fetchUser();
  },
  methods: {
    async save() {
      console.log(this.user);
      this.user.old_name = localStorage.getItem("name");
      const res = await this.$http.post("save_userinfo/", this.user);
      if (res.data.error_num === 0) {
        console.log(this.user.name);
        localStorage.setItem("name", this.user.name);
      }
      this.fetchUser();
      this.$toast({
          text: "更新成功",
          type: "success",
          duration: 3000
        });
      setTimeout(()=>{
        location.reload()
      },1000)
    },
    async fetchUser() {
      try {
        if (localStorage.token) {
          const res = await this.$http.get(
            `user_profile/?username=${localStorage.getItem("name")}`
          );
          this.user = res.data.list[0].fields;
          if(this.user.profile_pic === null){
            this.user.profile_pic = require("@/assets/bar/other.jpg");
          }else{
            this.user.profile_pic = require(this.user.profile_pic);
          }
        }
      } catch (e) {
        console.log("图片获取失败");
      }
    },
    async update() {
      console.log(this.user);
      const res = await this.$http.post("save_password/", this.user);
      console.log(res.data);
      if (res.data.error_num === 0) {
        // this.snackbar = true;
        this.$toast({
          text: "更新成功",
          type: "success",
          duration: 3000
        });
      }
      this.user.old_password = "";
      this.user.new_password = "";
    },
    upload() {
      let uploadbtn = this.$refs.upload;
      uploadbtn.click();
    },
    async changeimg(e) {
      let formData = new FormData();
      formData.append("pic", e.target.files[0]);
      const res = await this.$http.post("uploads/", formData);
      this.user.profile_pic = res.data.msg;
    }
  }
};
</script>

<style></style>
